<template>
  <div class="main">
    <el-card style="height: 100%">
      <el-carousel :interval="2500" arrow="always">
        <el-carousel-item>
          <el-image
            style="width: 100%; height: 100%"
            :src="require('../assets/lunbo/lun4.jpg')"
            fit="fill"
          ></el-image>
        </el-carousel-item>

        <el-carousel-item>
          <el-image
            style="width: 100%; height: 100%"
            :src="require('../assets/lunbo/lun2.jpg')"
            fit="fill"
          ></el-image>
        </el-carousel-item>

        <el-carousel-item>
          <el-image
            style="width: 100%; height: 100%"
            :src="require('../assets/lunbo/lun1.jpg')"
            fit="fill"
          ></el-image>
        </el-carousel-item>

        <el-carousel-item>
          <el-image
            style="width: 100%; height: 100%"
            :src="require('../assets/lunbo/lun3.jpg')"
            fit="fill"
          ></el-image>
        </el-carousel-item>
      </el-carousel>

      <div>
        <div style="display: flex; margin-top: 30px; height: 100px">
          <transition name="el-zoom-in-center">
            <div class="transition-box left">
              <el-image
                style="width: 100%; height: 100%"
                :src="require('../assets/lunbo/dowm.jpg')"
                fit="fill"
              ></el-image>
            </div>
          </transition>

          <transition name="el-zoom-in-top">
            <div class="transition-box mid">
              <el-image
                style="width: 100%; height: 100%"
                :src="require('../assets/lunbo/down2.jpg')"
                fit="fill"
              ></el-image>
            </div>
          </transition>

          <transition name="el-zoom-in-bottom right">
            <div class="transition-box"> <el-image
                style="width: 100%; height: 100%"
                :src="require('../assets/lunbo/down1.jpg')"
                fit="fill"
              ></el-image></div>
          </transition>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style>
.main {
  height: 563.5px;
  margin-left: -0.48rem;
  margin-top: -0.48rem;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.transition-box {
  margin-bottom: 10px;
  width: 400px;
  height: 180px;
  border-radius: 4px;
  background-color: #409eff;
  /* text-align: center; */
  color: #fff;
  /* padding: 80px 40px; */
  box-sizing: border-box;

  font-size: 25px;
}

.left {
  background-color: #606266;
}

.mid {
  margin-right: 10px;
  margin-left: 10px;
  background-color: #e6a23c;
}

.right {
  background-color: #f56c6c;
}
</style>
